<template>
  <div class="hv-designer-component-container">
    <div class="hv-designer-component-header">
      <div class="hv-designer-component-header-logo">
        <img src="@/visual/assets/img/logo.png" />
      </div>
    </div>
    <div class="hv-designer-component-menu" v-hv-scrollbar>
      <div
        class="hv-designer-component-menu-item"
        @click="popoverShow(componentPanelPopoverTypeConst.scheme, null)"
      >
        <hv-dynamic-icon iconName="BulbOutlined" :iconProps="{ class: 'icon' }" />
        <span class="hv-designer-component-menu-item-label">方案</span>
      </div>

      <div class="hv-designer-component-menu-item-border"></div>

      <div
        :class="[
          'hv-designer-component-menu-item',
          currentSelectGroup === group.key
            ? 'hv-designer-component-menu-item-active'
            : '',
        ]"
        v-for="group in componentGroupList"
        :key="group.key"
        :title="group.label"
        @click="popoverShow(componentPanelPopoverTypeConst.component, group)"
      >
        <hv-dynamic-icon :iconName="group.icon" :iconProps="{ class: 'icon' }" />
        <span class="hv-designer-component-menu-item-label">{{ group.label }}</span>
      </div>
    </div>
    <div
      class="hv-designer-component-popover-bg"
      v-show="popoverVisible"
      @click.stop="popoverHide"
    >
      <div class="hv-designer-component-popover" @click.stop>
        <div class="hv-designer-component-popover-header">
          <div class="hv-designer-component-popover-title">
            <template
              v-if="currentPopoverType === componentPanelPopoverTypeConst.component"
            >
              <hv-dynamic-icon
                iconName="SvgIconVisualComp"
                :iconProps="{ class: 'icon' }"
              />
              <span>可视化组件</span>
            </template>
            <template v-else>
              <hv-dynamic-icon iconName="BulbOutlined" :iconProps="{ class: 'icon' }" />
              <span>可视化方案</span>
            </template>
          </div>
          <div class="hv-designer-component-popover-close" @click.stop="popoverHide">
            <hv-dynamic-icon iconName="CloseOutlined" />
          </div>
        </div>
        <div class="hv-designer-component-popover-body" v-hv-scrollbar>
          <template
            v-if="currentPopoverType === componentPanelPopoverTypeConst.component"
          >
            <template v-if="componentList && componentList.length > 0">
              <div
                class="hv-designer-component-item"
                v-for="comp in componentList"
                :key="comp.id"
              >
                <div class="hv-designer-component-preview">
                  <img :src="comp.img" />
                </div>
                <div class="hv-designer-component-info">
                  <div class="hv-designer-component-label">{{ comp.label }}</div>
                  <div class="hv-designer-component-btns">
                    <div class="hv-designer-component-btn">
                      <hv-dynamic-icon iconName="StarOutlined" /> 收藏
                    </div>
                    <div class="hv-designer-component-btn" @click="pushComponent(comp)">
                      <hv-dynamic-icon iconName="PlusCircleOutlined" />
                      添加
                    </div>
                  </div>
                </div>
              </div>
            </template>
            <div v-else class="hv-designer-component-empty">
              <hv-custom-empty description="暂无组件！" />
            </div>
          </template>
          <template v-else>
            <div class="hv-designer-component-empty">
              <hv-custom-empty description="暂无方案！" />
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import { cloneDeep } from "lodash";
import { componentGroupConfig } from "@/visual/configs/dashboard-visual-config/dashboard-visual-config";
import { componentPanelPopoverTypeConst } from "@/visual/commons/consts/dashboard-const";
import CommonUtil from "@/visual/commons/utils/common-util";
import DashboardEvent from "@/visual/events/dashboard-event";

export default defineComponent({
  name: "DesignerComponentPanel",
  setup() {
    //弹框是否可见
    const popoverVisible = ref<boolean>(false);

    //组件分组列表
    const componentGroupList = reactive(componentGroupConfig);

    //组件列表
    const componentList = ref<any[]>([]);

    const currentPopoverType = ref<string>();

    //当前选择的分组
    const currentSelectGroup = ref("");

    /**
     * 组件框显示
     */
    const popoverShow = (type: string, group: any) => {
      currentPopoverType.value = type;
      popoverVisible.value = true;
      if (type === componentPanelPopoverTypeConst.component) {
        currentSelectGroup.value = group.key;
        const list = group.children ? group.children : [];
        componentList.value = list;
      }
    };

    /**
     * 隐藏
     */
    const popoverHide = () => {
      popoverVisible.value = false;
      currentSelectGroup.value = "";
    };

    /**
     * 添加组件
     */
    const pushComponent = (comp: any) => {
      popoverHide();
      const newComp = cloneDeep(comp);
      newComp.id = CommonUtil.shortUUID();
      newComp.label = newComp.label + CommonUtil.shortUUID();
      DashboardEvent.getCurrentInsertComponentEvent().next(newComp);
    };

    return {
      popoverVisible,
      popoverShow,
      popoverHide,
      currentSelectGroup,
      componentGroupList,
      componentList,
      pushComponent,
      componentPanelPopoverTypeConst,
      currentPopoverType,
    };
  },
});
</script>

<style lang="less" scoped>
@import "./DesignerComponentPanel.less";
</style>
